<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link href="./css/style.css" rel="stylesheet">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body style='background-image: url("./img/jcbj.png"); background-repeat:no-repeat;background-size: 100% 100%;'>
<header id="header" >
    <div class="container d-flex align-items-center justify-content-between">
        <h1 class="logo"><a href="./index.html"><img src="./img/logo.png" alt="logo"></a></h1>
        <nav id="navbar" class="navbar">
            <ul>
                <li><a class="nav-link scrollto" href="./index.html">首页</a></li>
                <li><a class="nav-link scrollto product" href="javascript:void(0)">产品中心</a>
                    <div class="product-popup" style="opacity: 0; display: none;">
                        <div class="cell flex-basis-quarter">
                            <div class="sys-win-product">

                            </div>
                        </div>
                    </div>
                </li>
                <li><a class="nav-link scrollto down" href="javascript:void(0)">免费下载</a>
                    <div class="down-popup" style="opacity: 0; display: none;">
                        <div class="cell flex-basis-quarter">
                            <div class="sys-win">

                            </div>
                        </div>
                    </div>
                </li>
                <li><a class="nav-link scrollto" href="./article.html">专题教程</a></li>
                <li class="gzh">
                    <a href="#follow">关注公众号
                        <div class="gzh-qrcode-popup" style="opacity: 0; display: none;">
                            <img src="" alt="">
                            <p style="color: #333333;margin-top: 4px;">关注灵动公众号</p>
                            <p style="color: #454545;margin-top: -12px">领取福利</p>
                        </div>
                    </a>
                </li>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>
        </nav>

    </div>
</header>
<main id="main" style="margin-top: 125px;">
    <div class="c_con02">
        <div class="i_con02_left">
            <ul>
            </ul>
        </div>
        <div class="i_con02_right">
            <div class="cps_title"><span>当前位置><a href="./index.html" style="color: #999999;">灵动工具官网</a>><a href=""  id="categorytitle"></a></span>
                <strong></strong>
            </div>
            <div class="cps_content">

            </div>
        </div>
    </div>
</main>
<footer id="footer">

    <div class="container footer-bottom clearfix">
        <div class="copyright">

        </div>
    </div>
</footer>
<script src="./js/main.js"></script>
<script src="./js/jquery.min.js"></script>
<script>
    // 处理公众号效果
    function guanzhu_gongzhonghao() {
        function show_qrcode() {
            $('.gzh-qrcode-popup').show()
            setTimeout(function () {
                $(' .gzh-qrcode-popup').css('opacity', 1)
            }, 0)
        }
        function hide_qrcode() {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    $('.gzh-qrcode-popup').hide()
                }
            }, 400)
            $('.gzh-qrcode-popup').css('opacity', 0)
        }
        $('a[href="#follow"]').hover(function () {
            show_qrcode()
        }, function () {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    hide_qrcode()
                }
            }, 100);
        })

        $('.gzh-qrcode-popup').hover(function () {
            show_qrcode()
        }, function () {
            setTimeout(function () {
                if ($('a[href="#follow"]:hover').length === 0 && $('.gzh-qrcode-popup:hover').length === 0) {
                    hide_qrcode()
                }
            }, 200);
        })
    }
    // 处理下载
    function downsofe() {
        function show_down() {
            $('.down-popup').show()
            setTimeout(function () {
                $(' .down-popup').css('opacity', 1)
            }, 0)
        }
        function hide_down() {
            setTimeout(function () {
                if ( $('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    $('.down-popup').hide()
                }
            }, 400)
            $('.down-popup').css('opacity', 0)
        }
        $('.down').hover(function () {
            show_down()
        }, function () {
            setTimeout(function () {
                if ($('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    hide_down()
                }
            }, 100);
        })
        $('.down-popup').hover(function () {
            show_down()
        }, function () {
            setTimeout(function () {
                if ($('.down:hover').length === 0 && $('.down-popup:hover').length === 0) {
                    hide_down()
                }
            }, 200);
        })
    }
    //产品中心
    function product() {
        function show_product() {
            $('.product-popup').show()
            setTimeout(function () {
                $(' .product-popup').css('opacity', 1)
            }, 0)
        }
        function hide_product() {
            setTimeout(function () {
                if ( $('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    $('.product-popup').hide()
                }
            }, 400)
            $('.product-popup').css('opacity', 0)
        }
        $('.product').hover(function () {
            show_product()
        }, function () {
            setTimeout(function () {
                if ($('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    hide_product()
                }
            }, 100);
        })
        $('.product-popup').hover(function () {
            show_product()
        }, function () {
            setTimeout(function () {
                if ($('.product:hover').length === 0 && $('.product-popup:hover').length === 0) {
                    hide_product()
                }
            }, 200);
        })
    }
    $(document).ready(function () {
        // 公众号
        guanzhu_gongzhonghao()
        downsofe()
        product()
    })
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return encodeURI(r[2]);
        return null; //返回参数值
    }
    $(document).ready(function(){
        var id = getUrlParam('id');
        if(!id){
            id = 1;
        }
        $.ajax({
            type: "GET",
            url: "https://api.nimbleuser.lingdong365.com/index.php/api/web/articlePage?id="+id,   //后端小伙伴给的新闻列表页的接口
            dataType: "json",
            async:false,
            success:function(data){
               // console.log(data);
                if(data.code == 200) {
                    var setting = data.data.setting;
                    document.title = setting.seo_title;
                    $('meta[name="keywords"]').attr('content',setting.seo_keywords);
                    $('meta[name="description"]').attr('content',setting.seo_description);
                    $('.copyright').html(setting.company+'<a href="https://beian.miit.gov.cn/" >'+setting.beian+'</a>');
                    $('.gzh-qrcode-popup img').attr('src',setting.qrcode_img);

                    var webproduct = data.data.webproduct;
                    var producttitlehtml = '';
                    if(webproduct.length>0){
                        for (var i = 1; i <= webproduct.length; i++) {
                            producttitlehtml += '<p style="display: block; height: 20px;line-height: 20px;"><a class="productlink" href="./productpage.html?id='+webproduct[i-1].id+'" style="color: #333333;font-size: 14px;font-weight: 500;">'+webproduct[i-1].title+'</a></p>';
                        }
                    }
                    $(".sys-win-product").html(producttitlehtml);

                    var webdown = data.data.webdown;
                    var downhtml ='';
                    if(webdown.length>0){
                        for (var i = 1; i <= webdown.length; i++) {
                            downhtml += '<p style="display: block; height: 20px;line-height: 20px;"><a class="downlink" href="'+webdown[i-1].link+'" style="color: #333333;font-size: 14px;font-weight: 500;">'+webdown[i-1].title+'</a></p>';
                        }
                    }
                    $(".sys-win").html(downhtml);

                    var webarticleclass = data.data.webarticleclass;
                    var webarticleclasshtml = '';
                    if(webarticleclass.length>0){
                        for (var o = 1; o <= webarticleclass.length; o++) {
                            webarticleclasshtml += ' <li><a href="./article.html?cid='+webarticleclass[o-1].id+'">'+webarticleclass[o-1].name+'</a></li>';
                        }
                    }
                    $(".i_con02_left ul").html(webarticleclasshtml);

                    var html = '';
                    var cname = data.data.cname;
                    var dataTitle = data.data.webarticlepage.title;
                    var dataBody = data.data.webarticlepage.content;
                    var category = data.data.webarticlepage.cid;
                    $("#categorytitle").html(cname);
                    $(".cps_title strong").html(cname);
                    $("#categorytitle").attr('href', './article.html?cid='+category);
                    html= '<h2 style="text-align: center">'+dataTitle+'</h2>'+dataBody;
                    // html= dataBody;
                    // console.log(html);
                    $(".cps_content").html(html);
                }else{
                    return false;
                }
            },
            error: function (xhr, status, error){
                console.log("错误：", error);
            }
        });
    });
</script>
</body>
</html>